<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/header.css">
  <script src="../js/jquery-1.10.1.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.js"></script>
</head>

<body>
  <header>
    <div class="smallHeader">
      <div class="smallHeaderOen">
        <img class="imgOen" src="../images/fila_blue_150.png" alt="">
      </div>
      <div class="smallHeaderTwo">
        <input class="searchCon" type="text" placeholder="卫衣">
        <div class="button">搜索</div>
        <div class="login" v-if="user"><a href="javascript:;">您好,{{user}}</a></div>
        <div class="login" @click="gologin" v-else><a href="javascript:;">登录</a></div>
        <div class="registered" @click="regBtn">注册</div>
        <div class="back" @click="back">退出</div>
        <div class="cart" @click="goCart">
          <span class="iconfont icon-gouwudai"></span>
        </div>
      </div>
    </div>
  </header>
</body>
<script>
  new Vue({
    el: ".smallHeader",
    data: {
      user: "",
    },
    created() {
      let userphone = window.localStorage.getItem("userinfo");
      userphone = JSON.parse(userphone).phone;
      this.user = userphone;

    },
    methods: {
      gologin() {
        window.location.href = "../html/login.html";
      },
      regBtn() {
        window.location.href = "../html/register.html";
      },
      back() {
        let userphone = window.localStorage.removeItem("userinfo");
        console.log(userphone);
        // location = window.location; //刷新
        location.reload();  //刷新
      },
      goCart() {
        window.location.href = "../html/cart.html";
      }
    }
  })
</script>

</html>